<style type="text/css">
	ul.set-con-switch{
		margin-bottom:0;
	}
	#Param li.text-con{
		color:#4F5356;
		border:0;
		text-align:left;
	}
	div.pool-con{
		display:inline-block;
		float:right;
	}
	span.net{
		display:inline-block;
		border-right:1px solid #DDD;
		line-height:20px;
		font-size:14px;
		padding-right:5px;
	}
	input.rag-input{
		width:38px;
		line-height:20px;
		font-size:14px;
		text-align:center;
		border:1px solid #DDD;
		border-radius:4px;
		margin-left:10px;
	}
	span.to{
		display:inline-block;
		line-height:20px;
		font-size:14px;
		margin-left:10px;
	}
	div.tab-con{
		font-size:14px;
		color:#4F5356;
		text-align:center;
		margin:20px 120px 10px;
	}
	table.set-con{
		width:100%;
		border-collapse:collapse;
		table-layout:fixed;
	}
	.set-con-long{
		width:34%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.set-con-short{
		width:22%;
	}
	input.text-con{
		color:#4F5356;
		height:34px;
		line-height:34px;
		width:80%;
		padding:0 0.5em;
		font-size:14px;
		border:1px solid #DDD;
		border-radius:4px;
		text-align:center;
	}
	input.dev-name{
		width:100%;
	}
	span.text-con{
		width:160px;
		line-height:40px;
		display:inline-block;
		vertical-align:middle;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.boder-tr{
		border-bottom:1px solid #E7E7E7;
		height:40px;
		line-height:40px;
		background-color:#F4F4F4;
	}
	ul.add-item{
		color:#FF8000;
		margin-top:4px;
		font-size:32px;
		float:right;
		margin-right:30px;
		cursor:pointer;
	}
	ul.add-gray{
		color:#BFBFBF;
		cursor:default;
	}
	span.color-gray{
		color:#BFBFBF;
	}
	span.handle-tip{
		display:inline-block;
		width:40px;
		height:30px;
		cursor:pointer;
	}
	i.vendor-icon{
		font-size:40px;
		display:inline-block;
		width:40px;
		height:40px;
		margin-right:10px;
		margin-bottom:5px;
		vertical-align:middle;
	}
	div.sel-item{
		position:relative;
		margin:0 15%;
	}
	ul.sel-item{
		position:absolute;
		background:#fff;
		border:1px solid #DDD;
		border-radius:4px;
		width:100%;
		line-height:30px;
		padding:0 0.5em;
		z-index:1000;
		top:39px;
	}
	ul.sel-item:hover{
		background:#eee;
	}
	ul.sel-item > li{
		cursor:pointer;
		width:160px;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		margin:0 auto;
	}
	ul.sel-item > li:hover{
		color:rgb(254, 152, 24);
		background:#eee;
	}
	input[readonly="readonly"]{
		border:0;
		margin:0;
	}
	.table-height{
		height:40px;
		line-height:40px;
		border-bottom:1px solid #E7E7E7;
	}
	p.note-str{
		text-align:left;
	}
	.line-gray{
		opacity:0.7;
		filter:alpha(opacity=70);
	}
	/*1080p适配*/
	@media screen and (min-device-width:1920px){
		span.net,
		span.to{
			font-size:18px;
			line-height:24px;
		}
		input.rag-input{
			width:48px;
			font-size:18px;
			line-height:24px;
		}
		div.tab-con{
			font-size:18px;
		}
		input.text-con{
			font-size:18px;
		}
		ul.sel-item{
			line-height:40px;
			top:52px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local json = require("luci.json")
		local para = {
			dhcpd = {config = {}, bind_list = {}},
			device_manage = {client_list = {}}
		}

		local result = tpl_get_data(para, true)
	-%>

	var result = <%=result%>;

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var dhcp = ret.dhcpd.config;
		var networkAddr = dhcp.network_address;
		initSwitch("Switch", dhcp.enable, function(state){
			if (1 == state){
				$("#Param").show();
				$("#DhcpTab").show();
			}else{
				$("#Param").hide();
				$("#DhcpTab").hide();
			}
		});

		$("#DhcpNet").text(networkAddr.substring(0, networkAddr.lastIndexOf(".")));
		$("#DhcpNet").attr("data-value", networkAddr);
		$("#DhcpStart").val(dhcp.pool_start);
		$("#DhcpEnd").val(dhcp.pool_end);
	}

	init(result);

	var addFlag = "1";
	var editFlag = "1";
	var bindLists = result[K_MODULE].dhcpd.bind_list;
	var bindListLen = bindLists.length;
	var devListsObj = result[K_MODULE].device_manage.client_list;
	var networkAddr = result[K_MODULE].dhcpd.config.network_address;
	var index = networkAddr.indexOf("/");
	var ip = networkAddr.substring(0, index);
	var indexLast = ip.lastIndexOf(".");
	var ipLast = ip.substring(indexLast + 1);
	var maskBits = networkAddr.substring(index + 1);
	var netmask = 0xffffffff ^ (0xffffffff & (Math.pow(2, 32 - maskBits) -1));

	function staticIpBindHtm(index, bindlist){
		var icon;
		if(bindlist.brand){
			icon = "icon_" + getAlias(bindlist.brand);
		}else{
			icon = "icon_" + getVendor(bindlist.mac);
		}

		var lineColor = checkSameNetwork(ip, bindlist.ip, netmask) ? "" : "line-gray";

		return '<tr class="table-height ' + lineColor + '" data-value="'+ index +'">' +
			     '<td class="set-con-long">' +
			       '<i class="vendor-icon ' + icon + '"></i>' +
			       '<span class="text-con dev-name" title="'+ bindlist.name +'">' + bindlist.name +
			       '</span>' +
			     '</td>' +
			     '<td class="set-con-short">' +
			       '<span class="text-con ip-addr">' + bindlist.ip +
			       '</span>' +
			     '</td>' +
			     '<td class="set-con-short">' +
			       '<span class="text-con mac-addr">' + bindlist.mac +
			       '</span>' +
			     '</td>' +
			     '<td class="set-con-short">' +
			         '<span class="handle-tip edit-item color-orange">' + label.edit + '</span>' +
			         '<span class="handle-tip del-item color-orange">' + label.del + '</span>' +
			     '</td>' +
			   '</tr>';
	}

	var newRow = '<td class="set-con">' +
	               '<div class="sel-item">' +
	                 '<input id="DevName" class="text-con dev-name hover" maxlength="32" value="">' +
	                 '<ul class="sel-item hidden"></ul>' +
	               '</div>' +
	             '</td>' +
	             '<td class="set-con">' +
	               '<input id="IpAddr" class="text-con hover" maxlength="15" value="">' +
	             '</td>' +
	             '<td class="set-con">' +
	               '<input id="MacAddr" class="text-con hover" maxlength="17" value="">' +
	             '</td>' +
	             '<td class="set-con">' +
	               '<span id="Bind" class="handle-tip bind-item color-orange">' + label.bind +
	               '</span>' +
	               '<span id="Cancel" class="handle-tip cancel-item color-orange">' + label.cancel +
	               '</span>' +
	             '</td>';

	function initBindListTab(bindLists){
		var bindListTabObj = $("#DhcpBind");
		var len = bindLists.length;

		if (10 == len){
			$("ul.add-item").addClass("add-gray");
		}

		if (0 == len){
			$("ul.add-item").click();
		}else{
			for(var i=0; i<len; i++){
				bindListTabObj.append(staticIpBindHtm(i,bindLists[i]));
			}
		}

		$(".del-item").click(function(){
			if (addFlag == "1"){
				var itemNum = $(this).parents("tr").attr("data-value");
				var data = {};
				var para = {};
				para.dhcpd = {};
				para.dhcpd.bind_list = data;

				data.id = bindLists[itemNum]["id"];
				data.mac = $(this).parents("tr").find("span.mac-addr").text();

				showLoading(label.saving);
				apiDel(para, function(){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.dhcpServerApp");
					}, 2000);
				});
			}
		});

		$(".edit-item").click(function(){
			if (addFlag == "1" && editFlag == "1"){
				editFlag = "0";
				addFlag = "0";
				$("ul.add-item").addClass("add-gray");
				$("span.edit-item").addClass("color-gray");
				$("span.del-item").addClass("color-gray");
				$("span.edit-item").removeClass("color-orange");
				$("span.del-item").removeClass("color-orange");

				var clientNum = $(this).parents("tr").attr("data-value");
				$(this).parents("tr").html(newRow);
				$("#DevName").val(bindLists[clientNum].name);
				$("#IpAddr").val(bindLists[clientNum].ip);
				$("#MacAddr").val(bindLists[clientNum].mac);
				selItems();
			}

			$("#Bind").click(function(){
				saveBindItem(this, "modify");
			});

			$("#Cancel").click(function(){
				stateman.go("pc.dhcpServerApp");
			});

			$("input.hover").bind("focus", function(){
				$(".err-note").hide();
			});
		});
	}

	function creatEmptyLine(){
		var bindListTabObj = $("#DhcpBind");
		var emptyRow = '<tr class="table-height" data-value="-1">' + newRow + '</tr>';

		bindListTabObj.append(emptyRow);
	}

	function saveBindItem(curPt, action){
		var itemNum = $(curPt).parents("tr").attr("data-value");
		var data = {};
		var para = {};
		para.dhcpd = {};
		para.dhcpd.bind_list = data;

		data.id = "";
		if (action == "modify"){
			data.id = bindLists[itemNum]["id"];
		}

		data.name = $("#DevName").val();
		data.ip = $("#IpAddr").val();
		data.mac = $("#MacAddr").val();

		if (errHandle(checkBindItem(data.name, data.ip, data.mac))){
			return;
		}

		showLoading(label.saving);
		if ("modify" == action){
			apiSet(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.dhcpServerApp");
					}, 2000);
				}else{
					$.setTimeout(function(){
						errHandle(code);
						closeLoading();
					}, 800);
				}
			});
		}else if("bind" == action){
			apiAdd(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.dhcpServerApp");
					}, 2000);
				}else{
					$.setTimeout(function(){
						errHandle(code);
						closeLoading();
					}, 800);
				}
			});
		}
	}

	$("ul.add-item").click(function(){
		if (editFlag == "1"){
			if (document.getElementById("DhcpBind").rows.length < 11
				&& document.getElementById("DhcpBind").rows.length == (bindListLen + 1)){
				addFlag = "0";
				$("span.edit-item").addClass("color-gray");
				$("span.del-item").addClass("color-gray");
				$("span.edit-item").removeClass("color-orange");
				$("span.del-item").removeClass("color-orange");
				$("ul.add-item").addClass("add-gray");
				creatEmptyLine();
				selItems();
			}

			$("#Bind").click(function(){
				saveBindItem(this, "bind");
			});

			$("#Cancel").click(function(){
				stateman.go("pc.dhcpServerApp");
			});

			$("input.hover").bind("focus", function(){
				$(".err-note").hide();
			});
		}
	});

	function selItems(){
		var selItems = "";

		if (devListsObj.length <= 0){
			return;
		}
		$("ul.sel-item").empty();
		for (var i=0; i<devListsObj.length; i++){
			selItems = selItems +
					   '<li class="item" data-value="'+ i +'" title="'+ devListsObj[i].name +'">' +devListsObj[i].name +
					   '</li>';
		}

		$("ul.sel-item").append(selItems);

		$("#DevName").click(function(){
			if (devListsObj.length > 0){
				$("ul.sel-item").show();
			}
		});

		$("li.item").click(function(){
			var index = $(this).attr("data-value");

			$("#DevName").val(devListsObj[index].name);
			$("#IpAddr").val(devListsObj[index].ip);
			$("#MacAddr").val(devListsObj[index].mac);

			$("ul.sel-item").hide();
		});
	}

	$("body").click(function(event){
		var eObj = $(event.target);

		if (!eObj.hasClass("dev-name")){
			$("ul.sel-item").hide();
		}
	});

	$("#Save").click(function(){
		var data = {};
		var para = {};
		para.dhcpd = {};
		para.dhcpd.config = data;

		data.enable = $("#Switch").attr("data-value");
		data.pool_start = $("#DhcpStart").val();
		data.pool_end = $("#DhcpEnd").val();
		data.network_address = $("#DhcpNet").attr("data-value");

		if (errHandle(checkPool(parseInt(data.pool_start), parseInt(data.pool_end)))){
			return;
		}

		showLoading(label.saving);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				$.setTimeout(function(){
					closeLoading();
				}, (ret[K_MODULE].dhcpd.config.wait_time * 1000));
			}else{
				$.setTimeout(function(){
					errHandle(code);
					closeLoading();
				}, 800);
			}
		});
	});

	initBindListTab(bindLists);

	function errHandle(errNo)
	{
		var noteStr = "";

		switch (errNo)
		{
		case E_NONE:
			return false;
		case E_DHCPPOOLSTART://DHCP地址池开始地址错误
			noteStr = errStr.dhcpStartErr;
			break;
		case E_DHCPPOOLEND://DHCP地址池结束地址错误
			noteStr = errStr.dhcpEndErr;
			break;
		case E_POOLSTARTGRATEREND://地址池开始地址大于结束地址
			noteStr = errStr.dhcpStartBigger;
			break;
		case E_DHCPD_INVIP://IP地址不在同一网段
			noteStr = errStr.dhcpIpInv;
			break;
		case E_DEVMNG_EMAC://无效的MAC
			noteStr = errStr.dhcpMacInv;
			break;
		case E_INVMACFMT:// MAC地址格式不正确
			noteStr = errStr.invMacFmt;
			break;
		case E_INVMACZERO:// MAC地址全0
			noteStr = errStr.macZeroErr;
			break;
		case E_INVMACBROAD:// MAC地址为广播地址
			noteStr = errStr.macBroadErr;
			break;
		case E_INVMACGROUP:// MAC地址为组播地址
			noteStr = errStr.macGroupErr;
			break;
		case E_DEVMNG_EIP://无效的IP
			noteStr = errStr.ipInvalid;
			break;
		case E_INVIP:// IP地址不正确
			noteStr = errStr.ipAddrErr;
			break;
		case E_DEVMNG_RNM://无效的设备名称，长度应在1-32之间
			noteStr = errStr.devNameErr;
			break;
		case E_DHCPD_RANGE_LANIP://DHCP地址池和LAN IP冲突
			noteStr = errStr.dhcpRangeLanip;
			break;
		case E_DHCPD_CONFLICT_IP://IP地址已存在
			noteStr = errStr.dhcpConflictIp;
			break;
		case E_DHCPD_IP_LANIP://IP地址不能为网关地址
			noteStr = errStr.dhcpIpLanIp;
			break;
		case E_DHCPD_CONFLICT_MAC://MAC地址已存在
			noteStr = errStr.dhcpConflictMac;
			break;
		case E_DHCPDMODE:// DHCPD服务模式，状态仅支持开关
		default:
			noteStr = errStr.invRequestFail;
			break;
		}

		showNote(noteStr);
		return true;
	}

	function checkPool(poolStart, poolEnd){
		var poolMax = (0x1<<(32 - maskBits)) - 2;

		if (!checkNumRange(poolStart, parseInt(poolMax) + parseInt(ipLast), parseInt(ipLast) + 1)){
			return E_DHCPPOOLSTART;
		}

		if (!checkNumRange(poolEnd, parseInt(poolMax) + parseInt(ipLast), parseInt(ipLast) + 1)){
			return E_DHCPPOOLEND;
		}

		if (poolEnd < poolStart){
			return E_POOLSTARTGRATEREND;
		}

		return E_NONE;
	}

	function checkBindItem(name, ip, mac){
		if (checkStrLen(name, 32, 1) != E_NONE){
			return E_DEVMNG_RNM
		}

		if (checkIp(ip) != E_NONE){
			return E_INVIP;
		}

		var result = checkMac(mac);
		if (result == E_MACEMPTY){
			return E_INVMACFMT;
		}

		if (result != E_NONE){
			return result;
		}

		return E_NONE;
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/dhcp.png?_=20170809165512" />
			<span class="help-title">{%label.dhcpServer%}</span>
		</li>
		<li class="title">{%helpStr.dhcp%}</li>
		<li class="content">{%helpStr.dhcpTip%}</li>
		<li class="title">{%helpStr.addressPool%}</li>
		<li class="content">{%helpStr.addressPoolTip%}</li>
		<li class="title">{%helpStr.ipMacBind%}</li>
		<li class="content">{%helpStr.ipMacBindTip%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/dhcp.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.dhcpServer%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con set-con-switch">
		<p class="set-con-desc">
			<label class="tip-lbl">{%label.dhcpServer%}</label>
			<span id="Switch" class="switch">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</p>
	</ul>
	<div id="Param" class="hidden">
		<ul class="set-con">
			<li class="text-con nowrap">
				<label class="tip-lbl">{%label.ipRange%}</label>
				<div class="pool-con">
					<span id="DhcpNet" class="net"></span>
					<input id="DhcpStart" class="rag-input hover" maxlength="3" value="" />
					<span class="to">{%label.to%}</span>
					<input id="DhcpEnd" class="rag-input hover" maxlength="3" value="" />
				</div>
			</li>
		</ul>
	</div>
	<div class="btn-con">
		<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	</div>
	<div id="DhcpTab" class="tab-con hidden">
		<table  id="DhcpBind" class="set-con">
			<tr class="boder-tr">
				<th class="set-con-long">{%label.deviceName%}</th>
				<th class="set-con-short">{%label.ipaddr%}</th>
				<th class="set-con-short">{%label.macAddr%}</th>
				<th class="set-con-short">{%label.handle%}</th>
			</tr>
		</table>
		<ul class="add-item"><i class="icon_add"></i></ul>
		<div class="err-note hidden">
			<i class="err-icon icon_remind_line"></i>
			<p class="note-str"></p>
		</div>
	</div>
</div>
